<%@include file="../head.jsp"%>
<head>
	<style type="text/css">
	.tooltip {
		background-color:#000;
		border:1px solid #fff;
		padding:10px 15px;
		width:200px;
		display:none;
		color:#fff;
		text-align:left;
		font-size:12px;
	
		/* outline radius for mozilla/firefox only */
		-moz-box-shadow:0 0 10px #000;
		-webkit-box-shadow:0 0 10px #000;
	}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			$("#myform :input").tooltip({

				// place tooltip on the right edge
				position: "center right",
			
				// a little tweaking of the position
				offset: [-2, 10],
			
				// use the built-in fadeIn/fadeOut effect
				effect: "fade",
			
				// custom opacity setting
				opacity: 0.7
			
			});
		}
	</script>
</head>
<body>
<form id="myform" action="#">

	<h3>Registration Form</h3>

	<div id="inputs">

		<!-- username -->
		<label for="username">Username</label>
		<input id="username" title="Must be at least 8 characters."/><br />

		<!-- password -->
		<label for="password">Password</label>
		<input id="password" type="password" title="Try to make it hard to guess." /><br />

		<!-- email -->
		<label for="email">Email</label>
		<input id="email" title="We won't send you any marketing material." /><br />

		<!-- message -->
		<label for="body">Message</label>
		<textarea id="body" title="What's on your mind?"></textarea><br />

		<!-- message -->
		<label for="where">Select one</label>
		<select id="where" title="Select one of these options">
			<option>-- first option --</option>
			<option>-- second option --</option>
			<option>-- third option --</option>
		</select>
		<br />
	</div>

	<!-- email -->
	<label>
		I accept the terms and conditions
		<input type="checkbox" id="check" title="Required to proceed" />
	</label>

	<p>
		<button type="button" title="This button won't do anything">Proceed</button>
	</p>

</form>
</body>